<template>
     <div class="bg">
          <div class="zb">
               <ul style="margin-left:20px;margin-top:20px;">
                    <li style="font-size:60px;">F<span>1</span></li>
                    <li class="kk" style="margin-left:50px"><span>空闲2→</span><img src="@/assets/images/toilet/men_orange.png"/><img src="@/assets/images/toilet/women_orange.png"><span>←空闲0</span></li>
                    <li class="arrow" style="margin-left:-50px"><img src="@/assets/images/toilet/arrow.png" /></li>
                    <li class="kk" style="float:right;"><span>空闲5→</span><img src="@/assets/images/toilet/men_green.png"/><img src="@/assets/images/toilet/women_orange.png"><span>←空闲0</span></li>
               </ul>
               <ul style="margin-left:20px;margin-top:20px;">
                    <li style="font-size:60px;">F<span>2</span></li>
                    <li class="kk" style="margin-left:50px"><span>空闲2→</span><img src="@/assets/images/toilet/men_orange.png"/><img src="@/assets/images/toilet/women_grren.png"><span>←空闲4</span></li>
                    <li class="arrow" style="margin-left:-50px"><img src="@/assets/images/toilet/arrow.png" /></li>
                    <li class="kk" style="float:right;"><span>空闲2→</span><img src="@/assets/images/toilet/men_orange.png"/><img src="@/assets/images/toilet/women_orange.png"><span>←空闲2</span></li>
               </ul>
               <ul style="margin-left:20px;margin-top:20px;">
                    <li style="font-size:60px;">F<span>3</span></li>
                    <li class="kk" style="margin-left:50px"><span>空闲2→</span><img src="@/assets/images/toilet/men_orange.png"/><img src="@/assets/images/toilet/women_orange.png"><span>←空闲2</span></li>
                    <li class="arrow" style="margin-left:-50px"><img src="@/assets/images/toilet/arrow.png" /></li>
                    <li class="kk" style="float:right;"><span>空闲7→</span><img src="@/assets/images/toilet/men_green.png"/><img src="@/assets/images/toilet/women_grren.png"><span>←空闲5</span></li>
               </ul>
               <ul style="margin-left:20px;margin-top:20px;">
                    <li style="font-size:60px;">F<span>4</span></li>
                    <li class="kk" style="margin-left:50px"><span>空闲5→</span><img src="@/assets/images/toilet/men_green.png"/><img src="@/assets/images/toilet/women_orange.png"><span>←空闲3</span></li>
                    <li class="arrow" style="margin-left:-50px"><img src="@/assets/images/toilet/arrow.png" /></li>
                    <li class="kk" style="float:right;"><span>空闲2→</span><img src="@/assets/images/toilet/men_orange.png"/><img src="@/assets/images/toilet/women_orange.png"><span>←空闲2</span></li>
               </ul>
               <ul style="margin-left:20px;margin-top:20px;">
                    <li style="font-size:60px;">F<span>5</span></li>
                    <li class="kk" style="margin-left:50px"><span>空闲2→</span><img src="@/assets/images/toilet/men_orange.png"/><img src="@/assets/images/toilet/women_grren.png"><span>←空闲5</span></li>
                    <li class="arrow" style="margin-left:-50px"><img src="@/assets/images/toilet/arrow.png" /></li>
                    <li class="kk" style="float:right;"><span>空闲5→</span><img src="@/assets/images/toilet/men_green.png"/><img src="@/assets/images/toilet/women_orange.png"><span>←空闲2</span></li>
               </ul>
               <ul style="margin-left:20px;margin-top:20px;">
                    <li style="font-size:60px;">F<span>6</span></li>
                    <li class="kk" style="margin-left:50px"><span>空闲6→</span><img src="@/assets/images/toilet/men_green.png"/><img src="@/assets/images/toilet/women_orange.png"><span>←空闲2</span></li>
                    <li class="arrow" style="margin-left:-50px"><img src="@/assets/images/toilet/arrow.png" /></li>
                    <li class="kk" style="float:right;"><span>空闲5→</span><img src="@/assets/images/toilet/men_green.png"/><img src="@/assets/images/toilet/women_grren.png"><span>←空闲6</span></li>
               </ul>
               
          </div>
          <div class="yb" style="margin-top:30px;">
               <ul class="yb1">
                    <li class="ts" style="margin-left:30px;">卫生间使用提示</li>
                    <li class="bz">
                         <img src="@/assets/images/toilet/green.png" />空闲<br />
                         <img src="@/assets/images/toilet/orange.png" />繁忙
                    </li>
               </ul>
               <div  class="yb2">
                    <img src="@/assets/images/toilet/men.png" /><br />
                    <p>空闲量/总量</p></br>
                    <p class="tx1"><span>56</span>/124</p>
               </div>
               <div  class="yb3">
                    <img src="@/assets/images/toilet/women.png" /><br />
                    <p>空闲量/总量</p></br>
                    <p class="tx2"><span>89</span>/124</p>
               </div>
          </div>
     </div>
</template>
<style lang="scss" scoped>
@import "./styles.scss";
</style>